<template>
	<view class="page">
		<con-venues :itemChooselist='itemChooselist' :venuelist='venuelist' @confirm="confirm1"></con-venues>
		<view style="position: fixed;z-index: 999;width: 100%;top: 120rpx;">
			<view class="box_11">
				<view class="image-wrapper_7">
					<u-search @search="search" @custom="search" placeholder="搜索" :showAction="false" v-model="keyword">
					</u-search>
				</view>
				<view class="label8_list" @click="openFilter">
					<uni-icons type="settings" size="16"></uni-icons>
					<view class="label_88">
						<text>筛选</text>
					</view>
				</view>
			</view>
		</view>

		<view class="popup-body">
			<view v-for="(activity,index) in Cardlist" :key="index" class="activity-card">
				<view class="activity-header">
					<text class="activity-name">{{ activity.name||'' }}</text>
					<view class="tag flex-align">
						{{ activity.program_name||'' }}
					</view>
				</view>

				<view class="activity-content">
					<view class="image">
						<!-- <u--image width="100%" height="250rpx" :src="item.cover != null ? item.cover : pic_img" radius="5"></u--image> -->
						<view
							style="width: 100%;height: 250rpx;background-color: #EDF5F5;display: flex;lex-direction: row; justify-content: center; align-items: center;">
							<image style="width: 100%;height: 250rpx;" :src="activity.cover" mode="aspectFit">
							</image>
						</view>
					</view>
					<view class="activity-info">
						<view class="" style="display: flex; flex-direction: row; align-items: center;">
							<view class="tag flex-align">
								编码{{ activity.id }}
							</view>
							<view class="tag flex-align">
								{{ activity.course_name||'' }}
							</view>
						</view>
						<view style="font-size: 24rpx;color: #4E6EAF;display: flex; flex-direction: row; ">

							<view class="tags flex-align">
								{{ activity.train_enum_name||'' }}
							</view>
							<view class="">
								{{activity.area_name||''}}
							</view>
						</view>
						<text class="date-range">{{ activity.display_start||'' }}~{{ activity.display_end||'' }}</text>
						<view class="activity-progress">
							<text class="progress-text" style="color: #2F75FA;"
								@click="oncourse(activity,index)">已报名：{{ activity.stock_sales||''}}/{{ activity.total_stock||'' }}</text>
							<view class="" style="font-size: 24rpx;color: #666;">
								{{ activity.course_items_name||'' }}/{{activity.coach_name||''}}
							</view>
						</view>
					</view>
				</view>
				<view class="" style="height: 30rpx;width: 100%;margin-top: 20rpx;">
					<u-line-progress :percentage="activity.enroll_progress" activeColor="#00aa7f"
						:showText="true"></u-line-progress>
				</view>
				<view class="" style="margin-top: 20rpx;">
					<view class="d-flex flex-row" style=" justify-content: space-between">
						<view class="d-flex flex-row" style=" justify-content: flex-start;align-items: center; ">
							<view class="">
								<u-checkbox-group  placement="row"
									@change="(e) => checkboxChange1(e, activity.id)" iconSize='13px' size='13px'>
									<u-checkbox label="线上" activeColor="#2F75FA" labelSize="13px" labelColor="#999999"
										:checked="activity.is_applet == 1 ? true : false">
									</u-checkbox>
								</u-checkbox-group>
							</view>
							<view class="" style="margin-left: 6rpx;">
								<u-checkbox-group  placement="row"
									@change="(e) => checkboxChange2(e, activity.id)" iconSize='13px' size='13px'>
									<u-checkbox label="前台端" activeColor="#2F75FA" labelSize="13px" labelColor="#999999"
										:checked="activity.is_pc == 1 ? true : false">
									</u-checkbox>
								</u-checkbox-group>
							</view>
							<view class="" style="margin-left: 6rpx;">
								<u-checkbox-group placement="row"
									@change="(e) => checkboxChange3(e, activity.id)" iconSize='13px' size='13px'>
									<u-checkbox label="招生端" activeColor="#2F75FA" labelSize="13px" labelColor="#999999"
										:checked="activity.is_machine == 1 ? true : false">
									</u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
						<view class="d-flex flex-row" style=" justify-content: flex-end">
							<!-- <view @click="ondelete(activity,index)" class="d-flex flex-row align-center justify-center"
								style="width: 67px;height: 26px;color: #ffffff;font-size: 12px;text-align: center;border-radius: 5px;line-height: 26px;background-color: #53c557;margin-right: 5px;">
								<view class="" style="margin-left: 10rpx;font-size: 22rpx;">
									复制
								</view>
							</view> -->
							<view @click="onedit(activity,index)" class="d-flex flex-row align-center justify-center"
								style="width: 67px;height: 26px;color: #ffffff;font-size: 12px;text-align: center;border-radius: 5px;line-height: 26px;background-color: #4c9dff;">
								<view class="" style="margin-left: 10rpx;font-size: 22rpx;">
									库存
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;height: 60rpx;">

			</view>
		</view>

		<view class="" style="width: 100%;height: 120rpx;"></view>
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class=""
				style="width: 45%;height: 80rpx;background: #ffffff;color: #ec652b;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;border:#ec652b 1rpx solid">
				重置
			</view>
			<view class="" @click="addculum"
				style="width: 45%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
				border-radius: 80rpx 80rpx;color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				新增
			</view>
		</view>
		<!-- 班级详情弹窗 -->
		<u-popup @touchmove.stop :show="enrollDetailPopup" @close="closeInfo" closeOnClickOverlay mode="center"
			:safeAreaInsetBottom="false" round="10">
			<view class="storepopup" style="height: 80vh;padding: 20rpx 20rpx;width: 660rpx;">
				<view class="title flex-between">
					<text>课程信息</text>
					<u-icon @click="closeInfo" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<view class="enroll-detail-popup">
					<!-- <view class="enroll-detail-title">
						<view class=""
							style="font-size: 22rpx;color: #2F75FA;background-color: #d5e3fe;border-radius: 8rpx;width: 100rpx;text-align: center;margin-top: 10rpx;">
							待上课
						</view>
					</view> -->
					<view class=""
						style="background-color: #f4f4f4;padding: 10rpx;border-radius: 10rpx;margin-top: 20rpx;font-size: 24rpx;display: flex;flex-direction: row;  justify-content: space-between;">
						<view class="activity-card1">
							<view class="activity-header">
								<text class="activity-name">{{ activitylist.name }}</text>
								<view class="tag flex-align">
									{{ activitylist.program_name }}
								</view>
							</view>

							<view class="activity-content">
								<view class="image">
									<view
										style="width: 100%;height: 250rpx;background-color: #EDF5F5;display: flex;lex-direction: row; justify-content: center; align-items: center;">
										<image style="width: 100%;height: 250rpx;" :src="activitylist.cover"
											mode="aspectFit">
										</image>
									</view>
								</view>
								<view class="activity-info">
									<view class="" style="display: flex; flex-direction: row; align-items: center;">
										<view class="tag flex-align">
											编码{{ activitylist.id }}
										</view>
										<view class="tag flex-align">
											{{ activitylist.course_name }}
										</view>
									</view>
									<view style="font-size: 24rpx;color: #4E6EAF;display: flex; flex-direction: row; ">

										<view class="tags flex-align">
											{{ activitylist.train_enum_name }}
										</view>
										<view class="">
											{{activitylist.area_name}}
										</view>
									</view>
									<text
										class="date-range">{{ activitylist.display_start }}~{{ activitylist.display_end }}</text>
									<view class="activity-progress">
										<text class="progress-text"
											style="color: #2F75FA;">已报名：{{ activitylist.stock_sales }}/{{ activitylist.total_stock }}</text>
										<view class="" style="font-size: 24rpx;color: #666;">
											{{ activitylist.course_items_name }}/{{activitylist.coach_name}}
										</view>
									</view>
								</view>
							</view>
							<view class="" style="height: 30rpx;width: 100%;margin-top: 20rpx;">
								<u-line-progress :percentage="activitylist.enroll_progress" activeColor="#00aa7f"
									:showText="true"></u-line-progress>
							</view>
						</view>
					</view>

					<view class=""
						style="background-color: #f4f4f4;padding: 30rpx;border-radius: 10rpx;margin-top: 20rpx;font-size: 24rpx;">
						<view class="">
							实到学员名单{{total}}人
						</view>
						<scroll-view @scrolltolower="loadMoreData" scroll-y style="height: 35vh; ">
							<view v-for="item in studentlist"
								style="background-color: #ffffff;padding: 20rpx;border-radius: 10rpx;width: 100%;margin-top: 20rpx;font-size: 24rpx;display: flex; flex-direction: column; justify-content: space-between; height: 150rpx; ">
								<view class="" style="display: flex; flex-direction: row; justify-content: space-between;align-items: center; ">
									<view class="" style="display: flex; flex-direction: row; align-items: center; ">
										<view class="">
											<image style="width: 50rpx;height: 50rpx;border-radius: 50% 50%;"
												:src="item.head_img" mode=""></image>
										</view>
										<view class="" style="display: flex; flex-direction: column;margin-left: 10rpx;">
											<view class="">
												{{item.name||''}}
											</view>
											<view class="">
												{{item.mobile||''}}
											</view>
										</view>
									</view>
									<view class="">
										<view class="">
											课时数{{item.stu_hour_num||''}}
										</view>
									</view>
									<view class="" style="display: flex; flex-direction: column;margin-left: 10rpx;">
										<view class="">
											{{item.coach_name||''}}-{{item.course_item_name||''}}
										</view>
										<view class="">
											{{item.item_name||''}}
										</view>
										
									</view>
								</view>
								<view class="" style="text-align: right;">
									{{item.create_at}}
								</view>
							</view>

						</scroll-view>

					</view>
				</view>
			</view>
		</u-popup>
		<u-popup @touchmove.stop :show="kucunPopup" @close="closekucun" closeOnClickOverlay mode="center"
			:safeAreaInsetBottom="false" round="10">
			<view class="title flex-between" style="height: 100rpx;padding: 20rpx 20rpx 0 20rpx;">
				<text>库存管理</text>
				<u-icon @click="closekucun" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
			</view>
			<scroll-view class="storepopup" style="height: 70vh;padding: 20rpx 20rpx;width: 660rpx;" scroll-y>
				<view class="enroll-detail-popup">
					<view class="data-display">
						<view v-for="(row, rowIndex) in tableData" :key="rowIndex" class="data-row">
							<view class="data-cell" v-for="(column, colIndex) in columns" :key="colIndex">
								<view class="label">{{ column.label }}</view>
								<view class="input-container">
									<input v-if="column.type == 'text'" v-model="row[column.prop]"
										:disabled="column.disable" />
									<input v-else-if="column.type === 'number'" v-model.number="row[column.prop]"
										type="number" :controls="true" :min="0" :step="1" style="width: 90px;"
										:disabled="column.disable" />
									<u-checkbox v-else-if="column.type === 'checkbox'" shape="circle"
										v-model="row[column.prop]" :checked="column.checked || false"
										:disabled="column.disable" style="margin-left: 0;"
										@change="handleCheckboxChange(rowIndex, column.prop)" />
									<input type="text" :value="formatTimestamp(row[column.prop])" placeholder="选择日期"
										v-else-if="column.type === 'date'"
										style="width: 180rpx; border: 1rpx solid #d9d9d9; border-radius: 4rpx; padding: 0 10rpx;"
										@click="showDatePicker(rowIndex, column.prop)"
										@input="handleDateInput(rowIndex, column.prop, $event.target.value)" />
									<u-datetime-picker :show="row[`show${column.prop}Picker`]"
										v-model="row[column.prop]" mode="date"
										@confirm="(value) => handleDateConfirm(rowIndex, column.prop, value)"
										@cancel="hideDatePicker(rowIndex, column.prop)" :minDate="minDate"
										:maxDate="maxDate" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="" style="margin-top: 20rpx;height: 100rpx;margin-right: 20rpx;">
				<view class="">
					<view class="d-flex flex-row" style=" justify-content: flex-end">
						<view @click="ontabledelete()" class="d-flex flex-row align-center justify-center"
							style="width: 67px;height: 26px;color: #ffffff;font-size: 12px;text-align: center;border-radius: 5px;line-height: 26px;background-color: #dcdcdc;margin-right: 5px;">
							<view class="" style="margin-left: 10rpx;font-size: 22rpx;">
								取消
							</view>
						</view>
						<view @click="ontable()" class="d-flex flex-row align-center justify-center"
							style="width: 67px;height: 26px;color: #ffffff;font-size: 12px;text-align: center;border-radius: 5px;line-height: 26px;background-color: #4c9dff;">
							<view class="" style="margin-left: 10rpx;font-size: 22rpx;">
								保存数据
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup @touchmove.stop :show="showFilterPopup" @close="closehomeInfo" closeOnClickOverlay mode="right">
			<scroll-view class="filter-content" style="height: 100vh;width: 60vw;" scroll-y>
				<view class="filter-item">
					<text class="filter-label">校区选择</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view :class="['week-item', selectId1 === index? 'active' : '']"
								v-for="(item,index) in weekList1" :key="index" @click="timesSelect1(item,index)">
								{{item.venue_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="filter-item">
					<text class="filter-label">班型</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view :class="['week-item', selectId6 === index? 'active' : '']"
								v-for="(item,index) in weekList6" :key="index" @click="timesSelect6(item,index)">
								{{item.enum_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="filter-item">
					<text class="filter-label">项目</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId2 === index? 'active' : '']"
								v-for="(item,index) in weekList2" :key="index" @click="timesSelect2(item,index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="filter-item" style="display: flex;flex-direction: row;justify-content: space-between;">
					<text class="filter-label">七天有课</text>
					<u-checkbox shape='circle' :checked="reg_face"  @change='checkboxChange'>选中</u-checkbox>
				</view> -->
				<!-- 	<view class="filter-item">
					<text class="filter-label">状态</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId3 === index? 'active' : '']"
								v-for="(item,index) in weekList3" :key="index" @click="timesSelect3(item,index)">
								{{item}}
							</view>
						</view>
					</view>
				</view> -->
				<view class="filter-item">
					<text class="filter-label">教练</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId4 === index? 'active' : '']"
								v-for="(item,index) in weekList4" :key="index" @click="timesSelect4(item,index)">
								{{item.coach_name}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="filter-item">
					<text class="filter-label">课程</text>
					<view class="item">
						<view class=" week-list flex-wrap">
							<view class="week-item" :class="['week-item', selectId5 === index? 'active' : '']"
								v-for="(item,index) in weekList5" :key="index" @click="timesSelect5(item,index)">
								{{item.course_name}}
							</view>
						</view>
					</view>
				</view> -->
			</scroll-view>
		</u-popup>
	</view>

</template>

<script>
	const venues = require("@/api/venues/venues.js");
	const personal = require("@/api/personal/index.js");
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				shows0: -1,
				filterData: [],
				itemChooselist: {},
				venuelist: [],
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
				studentlist: [],
				searchKey: "",
				Cardlist: [],
				showFilterPopup: false,
				selectId1: null,
				weekList1: [],
				selectId2: null,
				weekList2: [],
				selectId3: null,
				weekList3: [],
				selectId4: null,
				weekList4: [],
				selectId5: null,
				weekList5: [],
				selectId6: null,
				weekList6: [],
				listQuery: { //分页
					pageNo: 1,
					pageSize: 10,
				},
				totalPage: '', //几页
				enrollDetailPopup: false,
				listQuery1: { //分页
					pageNo1: 1,
					pageSize1: 10,
				},
				activitylist: {},
				totalPage1: '',
				kucunPopup: false,
				columns: [],
				tableData: [],
				mode: 'single', // 日历模式（默认日期选择）
				minDate: new Date('2025-01-01').getTime(), // 示例最小日期
				maxDate: new Date('2050-01-01').getTime(), // 示例最大日期
				train_id: '',
				activity_list: {},
				venue_id: '',
				read_checked1: '',
				read_checked2: '',
				read_checked3: '',
				checked1: false,
				checked2: false,
				checked3: false,
				coltitie: '',
				activityid: '',
				total:0
			}
		},
		onLoad() {
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			// this.itemChooselist = this.venuelist[0]
			// 处理itemChooselist的逻辑
			if (this.venuelist.length > 0) {
				this.itemChooselist = this.venuelist[0]
				this.venue_id = this.venuelist[0].id
			} else {
				this.itemChooselist = {}; // 或者设置为其他默认值
			}

			this.train_index()
			this.cls_options()
		},
		onShow() {},
		methods: {
			checkboxChange1(e, activityId) {
				console.log(e, 'e');
				if (e.length === 0) {
					this.read_checked1 = 2;
				} else {
					this.read_checked1 = 1;
				}
				this.coltitie = 'is_applet';
				this.activityid = activityId; // 保存拿到的activity.id
				console.log(this.read_checked1, 'this.read_checked1');
				this.trainonline();
			},
			checkboxChange2(e, activityId) {
				if (e.length === 0) {
					this.read_checked1 = 2;
				} else {
					this.read_checked1 = 1;
				}
				this.coltitie = 'is_pc';
				this.activityid = activityId; // 保存拿到的activity.id
				this.trainonline();
			},
			checkboxChange3(e, activityId) {
				if (e.length === 0) {
					this.read_checked1 = 2;
				} else {
					this.read_checked1 = 1;
				}
				this.coltitie = 'is_machine';
				this.activityid = activityId; // 保存拿到的activity.id
				this.trainonline();
			},
			async trainonline() {
				let params = {
					id: this.activityid,
					col: this.coltitie,
					col_val: this.read_checked1,
					tab:2
				};
				let res = await train.trainonline(params);
				if (res.code == 1) {

				}
			},
			oncourse(activity, index) {
				// this.studentlist = []
				// this.listQuery1.pageNo1 = 1
				// this.activitylist = activity
				// this.enrollDetailPopup = true
				// this.trainchosenslist()
				uni.navigateTo({
					url: `../../page_venues/training/traininglist?selectionArr=${encodeURIComponent(JSON.stringify(activity))}` + "&venue_id=" + this.venue_id + "&atstus=" + 3
				})
			},
			async trainchosenslist(activity, index) {
				let that = this
				if (this.listQuery1.pageNo1 == 1) that.studentlist = [];
				let params = {
					id: this.activitylist.id,
					page: this.listQuery1.pageNo1,
					pageSize: this.listQuery1.pageSize1,
				};
				let res = await train.trainchosens(params);
				if (res.code == 1) {
					that.studentlist = that.studentlist.concat(res.data.data); //将数据拼接在一起
					that.totalPage1 = res.data.last_page
					that.total = res.data.total
				}
			},
			loadMoreData() {
				if (this.totalPage1 <= this.listQuery1.pageNo1) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery1.pageNo1 += 1;
				this.trainchosenslist()
			},
			closeInfo() {
				this.enrollDetailPopup = false
			},
			async cls_options() {
				let params = {
					venue_id: this.venue_id,
				};
				let res = await train.cls_options(params);
				if (res.code == 1) {
					this.weekList1 = res.data.areaList
					this.weekList2 = res.data.projectList
					this.weekList3 = res.data.statusList
					this.weekList4 = res.data.coachList
					this.weekList5 = res.data.courseList
					this.weekList6 = res.data.trainEnumList
				}
			},
			timesSelect1(item, index) {
				if (this.selectId1 === index) {
					this.selectId1 = null;
					this.area_id = ''
				} else {
					this.selectId1 = index
					this.area_id = item.id
				}
			},
			timesSelect2(item, index) {
				if (this.selectId2 === index) {
					this.selectId2 = null;
					this.train_program = ''
				} else {
					this.selectId2 = index
					this.train_program = item.id
				}
			},
			timesSelect6(item, index) {
				if (this.selectId6 === index) {
					this.selectId6 = null;
					this.train_enum_id = ''
				} else {
					this.selectId6 = index
					this.train_enum_id = item.id
				}
			},
			timesSelect3(item, index) {
				if (this.selectId3 === index) {
					this.selectId3 = null;
					this.status = ''
				} else {
					this.selectId3 = index
					this.status = index
				}
			},
			timesSelect4(item, index) {
				if (this.selectId4 === index) {
					this.selectId4 = null;
					this.coach_id = ''
				} else {
					this.selectId4 = index
					this.coach_id = item.id
				}
			},
			timesSelect5(item, index) {
				if (this.selectId5 === index) {
					this.selectId5 = null;
					this.course_id = ''
				} else {
					this.selectId5 = index
					this.course_id = item.id
				}
			},
			openFilter() {
				this.showFilterPopup = true;
			},
			closehomeInfo() {
				this.showFilterPopup = false;
			},
			async train_index() {
				let that = this;
				if (this.listQuery.pageNo == 1) that.Cardlist = [];
				let params = {
					venue_id: this.venue_id,
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					tab:2
				};
				let res = await train.train_index(params);
				if (res.code == 1) {
					that.Cardlist = that.Cardlist.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
				}
			},
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.train_index()
			},
			search(e) {
				this.searchKey = e
			},
			addculum() {
				uni.navigateTo({
					url: './detail?venue_id=' + this.venue_id + "&status=" + 2
				})
			},
			onedit(activity, index) {
				this.kucunPopup = true;
				this.activity_list = activity;
				this.train_id = activity.id;
				this.stock_sku();
			},
			async stock_sku() {
				let params = {
					id: this.train_id
				};
				let res = await train.stock_sku(params);
				if (res.code === 1) {
					const skuData = res.data.sku_data || [];
					const tableData = skuData.map(item => ({
						area_id: item.area_id || '',
						coach_id: item.coach_id || '',
						goods_sku: item.goods_sku || '',
						group1: item.group1 || '',
						group2: item.group2 || '',
						group3: item.group3 || '',
						coach_name: item.coach_name || '',
						hour_num: item.hour_num || '',
						hour_num_period: item.hour_num_period,
						line_price: item.line_price || 0,
						selling_price: item.selling_price || 0,
						less_stock: item.less_stock || 0,
						op_stock: item.op_stock || 0,
						student_num: item.student_num || 0,
						enroll_start: this.formatDateToTimestamp(item.enroll_start),
						enroll_end: this.formatDateToTimestamp(item.enroll_end),
						sku_status: item.sku_status || true,
						showEnrollStartPicker: false,
						showEnrollEndPicker: false,
						stock: item.stock || 0,
						id: item.id,
						package_id: item.package_id,
						time_long: item.time_long
					}));
					this.tableData = tableData;
					this.updateColumns();
				}
			},
			closekucun() {
				this.kucunPopup = false;
			},

			confirm1(data) {
				this.venue_id = data
				console.log(data, 'data');
				// 直接根据接收到的 id 在 venuelist 中查找对应的场馆对象
				const selectedItem = this.venuelist.find(item => item.id === data);
				if (selectedItem) {
					// 将找到的场馆对象赋值给 itemChooselist
					this.itemChooselist = selectedItem;
				} else {
					console.log(`未找到 id 为 ${data} 的场馆对象`);
				}
				this.train_index();
			},
			addTableData() {
				this.tableData = [{
					enroll_start: '',
					enroll_end: '',
					showEnrollStartPicker: false,
					showEnrollEndPicker: false
				}];
			},
			showDatePicker(rowIndex, prop) {
				this.$set(this.tableData[rowIndex], `show${prop}Picker`, true);
			},
			handleDateConfirm(rowIndex, prop, value) {
				try {
					const timestamp = new Date(value).getTime();
					this.$set(this.tableData[rowIndex], prop, timestamp);
					const pickerProp = `show${prop}Picker`;
					this.$set(this.tableData[rowIndex], pickerProp, false);
				} catch (error) {
					console.error('日期解析出错:', error);
				}
			},
			hideDatePicker(rowIndex, prop) {
				this.$set(this.tableData[rowIndex], `show${prop}Picker`, false);
			},
			formatTimestamp(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			handleDateInput(rowIndex, prop, inputValue) {
				const date = new Date(inputValue);
				if (!isNaN(date.getTime())) {
					const timestamp = date.getTime();
					this.$set(this.tableData[rowIndex], prop, timestamp);
				} else {
					console.error('输入的日期格式不合法:', inputValue);
				}
			},
			handleCheckboxChange(rowIndex, prop) {
				this.$set(this.tableData[rowIndex], prop, !this.tableData[rowIndex][prop]);
			},
			updateColumns() {
				const newColumns = [];
				newColumns.push({
					prop: 'group1',
					label: '分组1',
					type: 'text',
					disable: true
				}, {
					prop: 'group2',
					label: '分组2',
					type: 'text',
					disable: true
				}, {
					prop: 'group3',
					label: '分组3',
					type: 'text',
					disable: true
				}, {
					prop: 'coach_name',
					label: '教练',
					type: 'text',
					disable: true
				}, {
					prop: 'hour_num',
					label: '课时数/有效期',
					type: 'text',
					disable: true
				}, {
					prop: 'line_price',
					label: '套餐价',
					type: 'number',
					disable: true
				}, {
					prop: 'selling_price',
					label: '报名价',
					type: 'number',
					disable: false
				}, {
					prop: 'less_stock',
					label: '剩余名额',
					type: 'number',
					disable: true
				}, {
					prop: 'op_stock',
					label: '增减库存',
					type: 'text',
					disable: false
				}, {
					prop: 'student_num',
					label: '单班人数',
					type: 'number',
					disable: true
				}, {
					prop: 'enroll_start',
					label: '报名开始日期',
					type: 'date',
					disable: false
				}, {
					prop: 'enroll_end',
					label: '报名结束日期',
					type: 'date',
					disable: false
				}, {
					prop: 'sku_status',
					label: '状态',
					type: 'checkbox',
					disable: false,
					checked: true
				});
				this.columns = newColumns;
			},
			formatDateToTimestamp(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				if (isNaN(date.getTime())) {
					console.error('日期字符串格式不合法:', dateStr);
					return '';
				}
				return date.getTime();
			},
			async ontable() {
				const sku_data = this.tableData.map(item => {
					const newItem = {
						...item
					};
					if (newItem.enroll_start) {
						newItem.enroll_start = this.formatTimestamp(newItem.enroll_start);
					}
					if (newItem.enroll_end) {
						newItem.enroll_end = this.formatTimestamp(newItem.enroll_end);
					}
					return newItem;
				});
				console.log(sku_data, 'this.tableData');
				let params = {
					sku_data,
					train_id: this.train_id
				};
				let res = await train.stock_save(params);
				if (res.code === 1) {
					this.train_index();
					this.kucunPopup = false;
				}
			},
			ontabledelete() {
				this.kucunPopup = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #EDF5F5;
		position: relative;

		.box_11 {
			width: 100%;
			height: 130rpx;
			display: flex;
			flex-direction: row;
			background: #ffffff;
			padding: 0 20rpx;

			.image-wrapper_7 {
				position: absolute;
				left: 30rpx;
				top: 30rpx;
				width: 600rpx;
				height: 62rpx;
				flex-direction: row;
				display: flex;
			}

			.label_list {
				display: flex;
				flex-direction: column;
				position: absolute;
				justify-content: center;
				/* 相对父元素水平居中 */
				align-items: center;
				/*  子元素相对父元素垂直居中 */
				right: 90rpx;
				width: 80rpx;
				top: 27rpx;

				.label_7 {
					width: 36rpx;
					height: 36rpx;
				}

				.label_77 {
					width: 60rpx;
					height: 36rpx;
					color: #333333;
					font-size: 26rpx;
					text-align: center;
				}
			}

			.label8_list {
				display: flex;
				flex-direction: column;
				position: absolute;
				justify-content: center;
				/* 相对父元素水平居中 */
				align-items: center;
				/*  子元素相对父元素垂直居中 */
				right: 20rpx;
				width: 80rpx;
				top: 27rpx;

				.label_8 {
					width: 36rpx;
					height: 36rpx;
				}

				.label_88 {
					width: 60rpx;
					height: 36rpx;
					color: #333333;
					font-size: 26rpx;
					text-align: center;
				}
			}
		}

		.group_3 {
			background-color: rgb(255, 255, 255);
			width: 710rpx;
			// height: 100%;
			display: flex;
			flex-direction: column;
			margin: 0 0 0 20rpx;
			position: fixed;
			z-index: 99;
			top: 249rpx;


			.item {
				// padding: 29rpx 30rpx 30rpx;
				padding: 20rpx 30rpx 20rpx 30rpx;

				.atinput {
					// border: #EBECEE 1rpx solid;
					font-size: 24rpx;
					height: 60rpx;
					width: 650rpx;
					padding-left: 20rpx;
				}

				.item-title {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}

				.value {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
				}

				.time-cell {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
					justify-content: flex-start;

					.time {
						width: 49%;

						&:last-of-type {
							margin-left: 20rpx;
						}
					}
				}

				.week-list {
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					grid-gap: 20rpx;
					position: relative;

					.week-item {
						padding: 15rpx 0;
						background-color: rgb(243, 243, 243);
						border-radius: 5rpx;
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
					}

					.active {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;

						// &:before {
						// 	display: block;
						// 	content: '';
						// 	position: absolute;
						// 	width: 27rpx;
						// 	height: 28rpx;
						// 	right: -2rpx;
						// 	bottom: -2rpx;
						// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						// 	background-repeat: no-repeat;
						// 	background-size: 100%;
						// }
					}

					.active1 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.active2 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.check {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
				}
			}
		}

		.text_2 {
			width: 93rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 15rpx 0 0 21rpx;
		}

		.section_2 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_3 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 42rpx 0 0 19rpx;
		}

		.text_4 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_3 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_5 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.text_6 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_4 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_7 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.image_2 {
			width: 151rpx;
			height: 151rpx;
			margin: 25rpx 0 0 18rpx;
		}


		.text_8 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 20rpx 0 0 19rpx;
		}

		.section_6 {
			width: 378rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 26rpx 0 27rpx 21rpx;
		}

		.button_1 {
			background-color: rgba(243, 243, 243, 1.000000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_9 {
			width: 48rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 63rpx;
		}

		.button_2 {
			background-color: rgba(255, 65, 5, 0.100000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_10 {
			width: 73rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(255, 98, 0, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 51rpx;
		}

		.button_4 {
			width: 90%;
			height: 70rpx;
			background: #3dabff;
			border-radius: 10rpx;
			margin-left: 5%;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
			line-height: 70rpx;
			margin-bottom: 20rpx;
		}

		.button_3 {
			width: 90%;
			height: 80rpx;
			position: fixed;
			bottom: 20rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 80rpx 80rpx;
			margin-left: 5%;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
		}

		.box_20 {
			background-color: rgba(0, 0, 0, 1);
			border-radius: 10rpx;
			position: absolute;
			width: 165rpx;
			height: 105rpx;
			flex-direction: row;
			display: flex;
			right: 35rpx;
			top: 100rpx;
			z-index: 998;

			.image-text_4 {
				width: 34rpx;
				height: 62rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 20rpx 0 0 28rpx;
			}

			.icon_5 {
				width: 30rpx;
				height: 30rpx;
				margin-left: 2rpx;
			}

			.text-group_4 {
				width: 34rpx;
				height: 18rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 18rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
				margin-top: 14rpx;
			}

			.image-text_5 {
				width: 36rpx;
				height: 65rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 17rpx 0 0 37rpx;
			}

			.icon_67 {
				width: 32rpx;
				height: 32rpx;
				margin-left: 2rpx;
			}

			.text-group_5 {
				width: 36rpx;
				height: 18rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 18rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
				margin-top: 15rpx;
			}

			.image-text_6 {
				width: 36rpx;
				height: 65rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 18rpx 0 0 37rpx;
			}

			.icon_7 {
				width: 32rpx;
				height: 32rpx;
				margin-left: 2rpx;
			}

			.text-group_6 {
				width: 36rpx;
				height: 18rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 18rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
				margin-top: 15rpx;
			}

			.image_4 {
				position: absolute;
				left: 125rpx;
				top: -13rpx;
				width: 28rpx;
				height: 14rpx;
			}
		}

	}

	.popup-body {
		padding: 0 30rpx;
		margin-top: 90rpx;
	}

	.activity-card {
		background: #ffffff;
		padding: 24rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.05);
		width: 100%;
		margin-bottom: 20rpx;
	}

	.activity-card1 {
		background: #ffffff;
		padding: 24rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.05);
		width: 100%;
	}

	.activity-content {
		display: flex;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.image {
		width: 200rpx;
		height: 100%;
		border-radius: 7rpx;
		// overflow: hidden;
		position: relative;

		/deep/ .u-transition {
			width: 100%;
			height: 100%;
		}

		.image-info {
			position: absolute;
			bottom: 0;
			width: 100%;
			left: 0;
			font-size: 24rpx;
			text-align: center;
			color: white;
			padding: 10rpx 0;
			background-color: rgba(0, 0, 0, 0.5);
		}
	}

	.activity-image {
		width: 200rpx;
		height: 160rpx;
		border-radius: 8rpx;
		flex-shrink: 0;
	}

	.activity-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		// gap: 16rpx;
	}

	.activity-info {
		display: flex;
		justify-content: flex-end;
		// align-items: center;
		gap: 16rpx;
	}


	.tag {
		font-size: 22rpx;
		color: #2F75FA;
		background-color: #d5e3fe;
		border-radius: 8rpx;
		padding: 5rpx 10rpx;
		margin-right: 20rpx;
	}

	.tags {
		font-size: 22rpx;
		color: #2F75FA;
		background-color: #d5e3fe;
		border-radius: 8rpx;
		padding: 5rpx 10rpx;
		margin-right: 20rpx;
	}


	.date-range {
		font-size: 24rpx;
		color: #666;
	}

	.activity-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.activity-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}

	.status-tag {
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 100rpx;
	}

	.active {
		background: #e8f6e9;
		color: #2ecc71;
	}

	.pending {
		background: #f5f5f5;
		color: #999;
	}

	.activity-progress {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.progress-text {
		font-size: 26rpx;
		color: #666;
	}

	.progress-bar-container {
		width: 100%;
		height: 16rpx;
		background: #f5f5f5;
		border-radius: 100rpx;
		overflow: hidden;
	}

	.progress-bar {
		height: 100%;
		border-radius: 100rpx;
		transition: width 0.3s ease;
	}

	.filter-content {
		background-color: #ffffff;
		padding: 20rpx 10rpx 20rpx 20rpx;
		border-radius: 32rpx 32rpx 0 0;
	}

	.filter-item {
		margin-bottom: 24rpx;
	}

	.item {
		// padding: 29rpx 30rpx 30rpx;
		padding: 0 20rpx 20rpx 20rpx;

		.atinput {
			// border: #EBECEE 1rpx solid;
			font-size: 24rpx;
			height: 60rpx;
			width: 600rpx;
			padding-left: 20rpx;
		}

		.item-title {
			color: rgb(153, 153, 153);
			font-size: 28rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
		}

		.value {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 500;
		}

		.time-cell {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 500;
			justify-content: flex-start;

			.time {
				width: 49%;

				&:last-of-type {
					margin-left: 20rpx;
				}
			}
		}

		.week-list {
			flex-direction: row;
			width: 100%;
			font-size: 24rpx;
			flex-wrap: wrap;
			display: flex;

			.week-item {
				padding: 15rpx 0;
				background-color: rgb(243, 243, 243);
				border-radius: 5rpx;
				text-align: center;
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-weight: 500;
				border: solid 2rpx transparent;
				box-sizing: border-box;
				padding: 6rpx 12rpx;
				margin-top: 20rpx;
				margin-right: 20rpx;
			}

			.active {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.active1 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.active2 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.check {
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				position: absolute;
				bottom: 10rpx;
				right: 0;
			}
		}
	}

	.data-display {
		margin-top: 20rpx;
		width: 100%;
		border-collapse: collapse;
		/* 合并边框 */
	}

	.data-row {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #e5e5e5;
		/* 行分隔线 */
		background-color: antiquewhite;
		margin-bottom: 20rpx;
	}

	.data-cell {
		flex: 1;
		min-width: 160rpx;
		/* 最小单元格宽度 */
		padding: 8rpx;
		box-sizing: border-box;

		&:nth-child(n+1) {
			/* 可选：单元格垂直分隔线 */
			/* border-right: 1rpx solid #e5e5e5; */
		}
	}

	.label {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 5rpx;
		display: block;
		/* 标签单独占一行 */
		text-align: left;
	}

	.input-container {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 5rpx;
		/* 输入框与其他元素间距 */
	}

	.input-container input {
		width: 100%;
		height: 40rpx;
		padding: 0 10rpx;
		border: 1rpx solid #d9d9d9;
		border-radius: 4rpx;
		font-size: 24rpx;

		&[type="checkbox"] {
			width: auto;
			height: 24rpx;
			margin-left: 0;
		}

		&[type="date"] {
			width: 180rpx;
			/* 日期输入框稍宽 */
		}
	}
</style>